<template>
	<div class="layout-pd">
		<el-card shadow="hover">
			<el-form style="max-width: 600px;"
				ref="ruleFormRef"
				:model="ruleForm"
				:rules="rules"
				label-width="150px"
				class="demo-ruleForm"
				:size="formSize"
				status-icon
			>
				<el-form-item label="门店订单分销：" prop="startStore">
					<el-tooltip  effect="dark" content="门店订单分销功能开启关闭"  style=""
						placement="right-start" >
						<svg t="1702367275758" style="transform: translateY(4px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
					</el-tooltip>&nbsp;
					<el-radio-group v-model="ruleForm.startStore">
						<el-radio :label="1">开启</el-radio>
						<el-radio :label="2">关闭</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="商城订单分销：" prop="startShop">
					<el-tooltip  effect="dark" content="门店订单分销功能开启关闭"  style=""
						placement="right-start" >
						<svg t="1702367275758" style="transform: translateY(4px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
					</el-tooltip>&nbsp;
					<el-radio-group v-model="ruleForm.startShop">
						<el-radio :label="1">开启</el-radio>
						<el-radio :label="2">关闭</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="分销模式：" >
					<el-tooltip  effect="dark" content="人人分销”默认每个人都可以分销，“指定分销”添加指定的会员为分销员"  style=""
						placement="right-start" >
						<svg t="1702367275758" style="transform: translateY(4px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
					</el-tooltip>&nbsp;
					<el-radio-group v-model="ruleForm.mode">
						<el-radio :label="1">人人分销</el-radio>
						<el-radio :label="2">指定分销</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="分销关系绑定：" >
					<el-tooltip  effect="dark" content="所有用户”指所有没有上级推广人的用户，“新用户”指新注册的用户"  style=""
						placement="right-start" >
						<svg t="1702367275758" style="transform: translateY(4px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
					</el-tooltip>&nbsp;
					<el-radio-group v-model="ruleForm.bind">
						<el-radio :label="1">所有用户</el-radio>
						<el-radio :label="2">新增活动用户</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="分销气泡：" prop="bubble">
					<el-tooltip  effect="dark" content="基础商品详情页分销气泡功能开启关闭"  style=""
						placement="right-start" >
						<svg t="1702367275758" style="transform: translateY(4px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
					</el-tooltip>&nbsp;
					<el-radio-group v-model="ruleForm.bubble">
						<el-radio :label="1">开启</el-radio>
						<el-radio :label="2">关闭</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="一级返佣比例：" prop="level1">
					<el-tooltip  effect="dark" content="订单交易成功后给上级返佣的比例0 - 100,例:5 = 反订单金额的5%"  style=""
						placement="right-start" >
						<svg t="1702367275758" style="transform: translateY(4px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
					</el-tooltip>&nbsp;
					<el-input-number :min="1" v-model="ruleForm.level1" />&nbsp;%
				</el-form-item>

				<el-form-item label="二级返佣比例：" prop="level2">
					<el-tooltip  effect="dark" content="订单交易成功后给上级返佣的比例0 ~ 100,例:5 = 反订单金额的5%"  style=""
						placement="right-start" >
						<svg t="1702367275758" style="transform: translateY(4px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
					</el-tooltip>&nbsp;
					<el-input-number :min="1"  v-model="ruleForm.level2" />&nbsp;%
				</el-form-item>

				<el-form-item label="提现最低金额：" >
					<el-tooltip  effect="dark" content="用户提现最低金额"  style=""
						placement="right-start" >
						<svg t="1702367275758" style="transform: translateY(4px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
					</el-tooltip>&nbsp;
					<el-input-number :min="1" v-model="ruleForm.minWithdrawal" />
				</el-form-item>

				<el-form-item label="提现银行卡"  >
					<el-tooltip  effect="dark" content="提现银行卡，每个银行换行"  style=""
						placement="right-start" >
						<svg t="1702367275758" style="transform: translateY(4px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
					</el-tooltip>&nbsp;
					<el-input v-model="ruleForm.bank" style="width: 400px;" type="textarea" placeholder="微信、支付宝、建行、农行、工行、交行" />
				</el-form-item>

				<el-form-item label="冻结时间：" prop="freezeTime">
					<el-tooltip  effect="dark" content="佣金冻结时间(天),冻结时间：填写为0时，代表佣金即时到账。用户退款或撤销订单佣金不会退回，请谨慎设置。冻结期内，用户撤销订单或退款，佣金将会同步撤销，超过冻结期佣金无法撤回。请根据您的业务场景，谨慎设置冻结时间。"  style=""
						placement="right-start" >
						<svg t="1702367275758" style="transform: translateY(4px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
					</el-tooltip>&nbsp;
					<el-input-number v-model="ruleForm.freezeTime" :min="1" />&nbsp;%
				</el-form-item>
				 
				<el-form-item label="分销时间" prop="dateTime">
					<el-tooltip  effect="dark" content="分销时间选择"  style=""
						placement="right-start" >
						<svg t="1702367275758" style="transform: translateY(4px);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="18" height="18"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m32 704h-64v-64h64v64z m11.2-203.2l-5.6 4.8c-3.2 2.4-5.6 8-5.6 12.8v58.4h-64v-58.4c0-24.8 11.2-48 29.6-63.2l5.6-4.8c56-44.8 83.2-68 83.2-108C598.4 358.4 560 320 512 320c-49.6 0-86.4 36.8-86.4 86.4h-64C361.6 322.4 428 256 512 256c83.2 0 150.4 67.2 150.4 150.4 0 72.8-49.6 112.8-107.2 158.4z" p-id="2392" fill="#bfbfbf"></path></svg>
					</el-tooltip>&nbsp;
					<el-date-picker v-model="ruleForm.dateTime" type="daterange" unlink-panels 
						format="YYYY/MM/DD" value-format="YYYY-MM-DD" range-separator="-" :disabled-date="disabledDate"
						start-placeholder="开始日期" end-placeholder="结束日期" />
				</el-form-item>
				
				<el-form-item>
					<el-button type="primary" @click="submitForm(ruleFormRef)">
						提交
					</el-button> 
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="funCountup">
import {  onMounted, ref, reactive } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<any>({
	startStore: 1,
	startShop: 1,
	mode: 2,
	bind: 1,
	bubble: 2,
	level1: 1,
	level2: 1,
	minWithdrawal: 1,
	bank: '',
	dateTime: '',
	freezeTime: '',
})

const rules = reactive<FormRules<any>>({
	name: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
	freezeTime: [{required: true,message: '请选择冻结时间',trigger: 'change'}],
	level1: [{required: true,message: '请选择一级返佣比例',trigger: 'change'}],
	level2: [{required: true,message: '请选择二级返佣比例',trigger: 'change'}],
	bubble: [{required: true,message: '请选择分销气泡',trigger: 'change'}],
	startStore: [{required: true,message: '请选择门店订单分销状态',trigger: 'change'}],
	startShop: [{required: true,message: '请选择商城订单分销状态',trigger: 'change'}],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const disabledDate= (time: Date) => time.getTime() > Date.now();

// 页面加载时
onMounted(() => {
});
</script>

<style scoped lang="scss">
</style>
